<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<header th:replace="admin/fragments/header::headerFragment"></header>
<link rel="stylesheet" href="/static/css/fileManage.css">
<link rel="stylesheet" href="/static/css/layui.css">

<head>

</head>
<style>
    .contents {
        width: 100%;
        padding: 70px 0 0 200px;
        background: #f5f5f5;
    }
    
    .footer {
        width: 100%;
        height: 50px;
        position: fixed;
        bottom: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }
    
    .footer p {
        height: 50px;
        background: #f9f9f9;
        line-height: 50px;
        text-align: left;
        padding-left: 50px;
    }
</style>

<body>
    <div th:replace="admin/fragments/header::header-body"></div>
    <div class="contents">
        <div class="contentwapper">
            <h5>文件管理</h5>
            <!---文件上传的区域--->
            <div class="updates">
                将文件拖至此处或点击上传
            </div>
            <!--进度条-->
            <div style="margin-top: 50px" class="layui-progress" lay-filter="demo" lay-showPercent="yes">
                <div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div>
            </div>
            <div style="margin-top: 50px">
                <a href="/file/download">文件下载</a>
            </div>
        </div>
        <div th:replace="admin/fragments/footer::footer"></div>
    </div>


</body>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.7/layui.all.js"></script>
<script>
    var element;
    layui.use('element', function() {
        element = layui.element;
    });
    layui.use('upload', function() {
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '.updates', //绑定元素,
            url: '/file/upload',
            accept: "file", //文件类型
            auto: true, //自动上传
            progress: function(n, elem) {
                var percent = n + '%' //获取进度百分比
                console.log(percent)
                element.progress('demo', percent); //可配合 layui 进度条元素使用
                //以下系 layui 2.5.6 新增
                console.log(elem); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。
            },
            // process:function(n,elem){
            //     console.log(elem)
            // },
            done: function(res) {
                console.log(res)
            },
            error: function(res) {
                console.log(res)
                    //请求异常回调
            }

        });
    });
</script>

</html>